<template>
	<view class="details">
		<view class="detailsHead" :class="[allMsg.orderState == 2? 'detailsHeadTwo' : '']">
			<view class="detailsHead-state">
				<!-- {{allMsg.orderState | changeorderState}} -->
				<text v-if="allMsg.orderState == 1">待接单</text>
				<text v-else-if="allMsg.orderState == 2">待发货</text>
				<text v-else-if="allMsg.orderState == 3">已发货</text>
				<text v-else-if="allMsg.orderState == 4">已发货</text>
			</view>
			<view class="detailsHead-time">
				下单时间：{{allMsg.createTime}}
			</view>
			<view class="detailsHead-address">
				<view class="detailsHead-address-left">
					<image class="detailsHead-address-left-img" src="../../../static/manufacturers/address.png" mode="">
					</image>
				</view>
				<view class="detailsHead-address-right">
					<view class="detailsHead-address-right-top font_blod">
						<text>{{allMsg.orderName}}</text>
						<text style="margin-left: 24rpx;">{{allMsg.orderPhone}}</text>
					</view>
					<view class="detailsHead-address-right-btm">
						{{allMsg.orderAddress}}
					</view>
				</view>
			</view>
		</view>
		<view class="detailsTitle">
			<view class="detailsTitle-left">
				<text class="detailsTitle-txt1"></text>
				<text class="detailsTitle-txt2 font_blod">预订清单</text>
			</view>
			<view class="detailsTitle-left-right" @click="saveOrderData(1)">
				<image class="detailsTitle-left-right-img" src="../../../static/manufacturers/add.png" mode=""></image>
				<text class="detailsTitle-left-right-txt font_blod">新增产品</text>
			</view>
		</view>
		<view class="detailsMain">
			<view class="detailsMain-li" v-for="(item, index) of allMsg.zsyhAgentOrderRelList" :key="index">
				<view class="detailsMain-li-left">
					<image @click="deleteOrderPartsById(item.id, index)" class="detailsMain-li-left-sub"
						src="../../../static/manufacturers/sub.png" mode=""></image>
					<image class="detailsMain-li-left-img" @click="previewImage(item.attributeLogo)"
						:src=item.attributeLogo mode=""></image>
				</view>
				<view class="detailsMain-li-right">
					<view class="detailsMain-li-right-one font_blod">
						{{item.attributeName}}
					</view>
					<view class="detailsMain-li-right-two">
						<text class="detailsMain-li-right-two-txt" v-if="item.attributeIsPost == 1">包邮 偏远地区补差价</text>
						<text class="baoyou-no" v-else>不包邮</text>
					</view>
					<view class="detailsMain-li-right-three">
						<view class="detailsMain-li-right-three-box">
							<text class="detailsMain-li-right-three-box-danwei">数量:</text>
							<input @blur="input_val(item, index)" :auto-blur="true"
								class="detailsMain-li-right-three-box-input" type="digit" value=""
								v-model="item.orderSellCount" />
							<text class="detailsMain-li-right-three-box-unit">{{item.partsUnit}}</text>
						</view>
						<view class="detailsMain-li-right-three-box">
							<text class="detailsMain-li-right-three-box-danwei">单价:</text>
							<text class="detailsMain-li-right-three-box-money">￥</text>
							<input @blur="input_price(item, index)" :auto-blur="true"
								class="detailsMain-li-right-three-box-input" type="digit" value=""
								v-model="item.orderSellPrice" />
						</view>
					</view>
					<view class="detailsMain-li-right-four">
						<text class="detailsMain-li-right-four-txt1">小计:</text>
						<text
							class="detailsMain-li-right-four-txt2 font_blod">￥{{NumberMul(item.orderSellCount, item.orderSellPrice)}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="details-account" @click="cli_gobankcard">
			<view class="details-account-left">
				<text>收款账户</text>
				<text class="details-account-left-txt">{{bank.cardNo}}</text>
			</view>
			<image class="details-account-img" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode="">
			</image>
		</view>
		<view class="details-logistics">
			<view class="details-logistics-box">
				<text class="details-logistics-box-txt">物流单号</text>
				<input class="details-logistics-box-input" placeholder-class="inputplace" placeholder="请填写物流单号"
					maxlength="32" type="text" value="" />
			</view>
			<view class="details-logistics-box">
				<text class="details-logistics-box-txt">物流公司</text>
				<input class="details-logistics-box-input" placeholder-class="inputplace" placeholder="请输入物流公司"
					maxlength="32" type="text" value="" />
			</view>
		</view>
		<view class="details-btn">
			<view class="details-btn-box">
				<image class="details-btn-img" src="../../../static/manufacturers/btn_1.png" mode=""></image>
				<text class="details-btn-title">合计:</text>
				<text class="details-btn-m font_blod" style="color: #FF9300;">￥</text>
				<text class="details-btn-txt font_blod">{{allMsg.orderEndMoney}}</text>
				<text class="details-btn-box-txt font_blod" @click="cli_play(0)">完成发货</text>
			</view>
		</view>
		<uni-popup ref="popup" :is-mask-click="false" :mask-click="false" type="center">
			<view class="YJWupSuccess">
				<image class="YJWupSuccessImg" src="https://www.zzzsyh.com/applets/agent/agent/jiedan_success.png"
					mode=""></image>
				<view class="YJWupSuccessTitle">
					发货成功
				</view>
				<view class="YJWupSuccessContent">
					<!-- 正在审核中，请耐心等待… -->
				</view>
				<view class="YJWupSuccessBtn" @click="cli_now">
					我知道了
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	import {
		eventBus
	} from '../../../main.js'
	export default {
		data() {
			return {
				id: uni.getStorageSync('id_factory_order'),
				factoryId: uni.getStorageSync('id_factory'),
				allMsg: {
					orderState: '',
					createTime: '',
					orderName: '',
					orderPhone: '',
					orderAddress: '',
					orderEndMoney: '',
					zsyhAgentOrderRelList: []
				},
				bank: {
					bankName: '',
					cardName: '',
					cardNo: '',
				},
				logistics: '', // 物流公司
				logisticsNo: '', // 物流单号
			}
		},
		watch: {

		},
		onLoad(val) {
			// if (val.bankName) {
			// 	this.bank.bankName = val.bankName
			// }
			// if (val.cardName) {
			// 	this.bank.cardName = val.bankName
			// }
			// if (val.cardNo) {
			// 	this.bank.cardNo = val.bankName
			// }
		},
		onShow() {
			eventBus.$on('cardNo', (message) => {
				this.bank.cardNo = message
			})
			eventBus.$on('bankName', (message) => {
				this.bank.bankName = message
			})
			eventBus.$on('cardName', (message) => {
				this.bank.cardName = message
			})
			this.getFactoryOrderDetails(this.id)
		},
		mounted() {
			// 获取厂家银行默认账户
			this.getFactoryBankCardsDefault()
		},
		computed: {
			putlist() {
				let list = this.allMsg.zsyhAgentOrderRelList
				let reList = list.map(item => {
					return {
						id: item.id,
						orderCount: item.orderSellCount,
						orderPrice: item.orderSellPrice,
						attributeId: item.attributeId
					}
				})
				console.log(99999999999, list);
				return reList
			}
		},
		methods: {
			// 图片预览
			previewImage(item, index) {
				console.log(item);
				let lis = item.split()
				wx.previewImage({
					current: 0, // 当前显示图片的http链接
					urls: lis // 需要预览的图片http链接列表
				})
			},
			// 输入框控制数量
			input_val(item, index) {
				console.log(item, index);
				let list = this.allMsg.zsyhAgentOrderRelList
				let val = Number(item.orderSellCount)
				const reg = /^[1-9]\d*(\.\d{1,2})?$|^0(\.\d{1})?$/;
				if (!val || val == '' || val == ' ') {
					list[index].orderSellCount = 0
				} else
				if (!reg.test(val)) {
					list[index].orderSellCount = 0
				}
				console.log(val);
				this.getAllMoney(list)
			},
			input_price(item, index) {
				console.log(item, index);
				let list = this.allMsg.zsyhAgentOrderRelList
				let val = Number(item.orderSellPrice)
				const reg = /^[1-9]\d*(\.\d{1,2})?$|^0(\.\d{1})?$/;

				if (!val || val == '' || val == ' ') {
					list[index].orderSellPrice = 0
				} else if (!reg.test(val)) {
					list[index].orderSellPrice = 0
				}
				this.getAllMoney(list)
			},
			getAllMoney(list) {
				let allMoney = 0
				for (let i = 0; i < list.length; i++) {
					let money = this.NumberMul(list[i].orderSellCount, list[i].orderSellPrice)
					allMoney = this.NumberAdd(allMoney, money)
				}
				// console.log(allMoney);
				// return allMoney
				this.allMsg.orderEndMoney = allMoney
			},
			// 跳转选择银行卡
			cli_gobankcard() {
				this.saveOrderData(2)
			},
			// 点击生成发货单--保存数据
			cli_play(val) {
				if (!this.bank.cardNo) {
					uni.showToast({
						title: '请先选择收款账户',
						icon: 'none'
					})
				} else {
					let list = this.putlist
					if (list.length > 0) {
						this.generateDeliverOrder(list)
					} else {
						uni.showToast({
							title: '请先新增产品',
							icon: 'none'
						})
					}
				}
			},
			// 生成发货单
			generateDeliverOrder(partsJson) {
				uni.request({
					url: allapi.confirmDeliverOrder,
					data: {
						id: this.id,
						bankName: this.bank.bankName,
						bankUserName: this.bank.cardName,
						bankCardNo: this.bank.cardNo,
						logistics: this.logistics,
						logisticsNo: this.logisticsNo,
						partsJson: partsJson
					},
					success: (res) => {
						console.log(res);

						this.$refs.popup.open()
					}
				})
			},
			// 点击返回
			cli_now() {
				uni.redirectTo({
					url: '/pages/manufacturers/order/order'
				})
			},
			// 保存订单数据
			saveOrderData(index) {
				let partsJson = this.putlist
				console.log(partsJson);
				uni.request({
					url: allapi.saveOrderData,
					data: {
						id: this.id,
						bankName: this.bank.bankName,
						bankUserName: this.bank.cardName,
						bankCardNo: this.bank.cardNo,
						logistics: this.logistics,
						logisticsNo: this.logisticsNo,
						partsJson: partsJson
					},
					success: (res) => {
						console.log(res);
						if (index == '1') {
							uni.navigateTo({
								url: '/pages/manufacturers/product/product'
							})
						}else if (index == '2') {
							uni.navigateTo({
								url: '/pages/manufacturers/bankcard/bankcard'
							})
						}
					}
				})
			},
			// 获取详情
			getFactoryOrderDetails(id) {
				uni.request({
					url: allapi.getFactoryOrderDetails,
					data: {
						id: id
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.allMsg = dat
					}
				})
			},
			//删除订单的产品信息
			deleteOrderPartsById(id, index) {
				let _that = this
				uni.request({
					url: allapi.deleteOrderPartsById,
					data: {
						id: id,
						orderId: this.id
					},
					success: (res) => {
						console.log(res);
						// _that.getFactoryOrderDetails(this.id)
						let list = _that.allMsg.zsyhAgentOrderRelList
						list.splice(index, 1)
						console.log(969696, list);
						_that.allMsg.zsyhAgentOrderRelList = list
						_that.getAllMoney(list)
						_that.saveOrderData()
					}
				})
			},
			// 获取厂家银行默认账户
			getFactoryBankCardsDefault() {
				uni.request({
					url: allapi.getFactoryBankCardsDefault,
					data: {
						factoryId: this.factoryId
					},
					success: (res) => {
						console.log(res);
						if (res && res.data.data) {
							this.bank = res.data.data
						}
					}
				})
			},
		},
		filters: {
			changeorderState(val) {
				if (val == 1) {
					return '待接单'
				} else if (val == 2) {
					return '待发货'
				} else if (val == 3) {
					return '已发货'
				} else if (val == 4) {
					return '已发货'
				}
			}
		}
	}
</script>

<style scoped>
	.details {
		/* position: absolute; */
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		padding-bottom: 160rpx;
	}

	.detailsHead {
		min-height: 326rpx;
		background-image: url('https://www.zzzsyh.com/applets/agent/factory/10.png');
		background-size: 100%;
		background-repeat: no-repeat;
		padding-top: 0.1rpx;
	}

	.detailsHeadTwo {
		background-image: url('https://www.zzzsyh.com/applets/agent/factory/9.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.detailsHead-state {
		font-weight: 600;
		font-size: 42rpx;
		color: #FFFFFF;
		margin-left: 48rpx;
		margin-top: 48rpx;
		line-height: 58rpx;
	}

	.detailsHead-time {
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 16rpx;
		margin-left: 48rpx;
		line-height: 34rpx;
	}

	.detailsHead-address {
		margin: 32rpx 24rpx 0;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 24rpx;
		border-radius: 16rpx;
	}

	.detailsHead-address-left-img {
		width: 40rpx;
		height: 40rpx;
	}

	.detailsHead-address-right {
		flex: 1;
		margin-left: 24rpx;
	}

	.detailsHead-address-right-top {
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
	}

	.detailsHead-address-right-btm {
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #666666;
		font-weight: 400;
		line-height: 40rpx;
	}

	.detailsTitle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 26rpx 0;
	}

	.detailsTitle-left-right {
		padding: 10rpx 16rpx;
		background: #5DD4D6;
		border-radius: 30px;
		display: flex;
		align-items: center;
		margin-right: 24rpx;
	}

	.detailsTitle-left-right-img {
		width: 40rpx;
		height: 40rpx;
	}

	.detailsTitle-left-right-txt {
		font-size: 24rpx;
		color: #FFFFFF;
		margin-left: 12rpx;
	}

	.detailsTitle-left {
		display: flex;
	}

	.detailsTitle-txt1 {
		width: 10rpx;
		height: 34rpx;
		background: #5DD4D6;
		border-radius: 5rpx;
		display: block;
		margin-left: 24rpx;
	}

	.detailsTitle-txt2 {
		font-size: 32rpx;
		color: #333333;
		margin-left: 24rpx;
	}

	.detailsMain {
		max-height: 1100rpx;
		/* flex: 1; */
		background: #FFFFFF;
		margin: 0 24rpx;
		overflow: auto;
		border-radius: 16rpx;
	}

	.detailsMain-li {
		padding: 24rpx 0;
		margin-right: 32rpx;
		margin-left: 16rpx;
		border-bottom: 2rpx solid #EEEEEE;
		display: flex;
	}

	.detailsMain-li:last-of-type {
		border: 0;
	}

	.detailsMain-li-left {
		display: flex;
		/* align-items: center; */
	}

	.detailsMain-li-left-sub {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
		margin-top: 60rpx;
	}

	.detailsMain-li-left-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		background: #EEEEEE;
	}

	.detailsMain-li-right {
		flex: 1;
		margin-left: 32rpx;
	}

	.detailsMain-li-right-one {
		color: #333333;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.detailsMain-li-right-two {
		margin-top: 16rpx;
	}

	.detailsMain-li-right-two-txt {
		font-size: 24rpx;
		font-weight: 400;
		color: #28CD50;
		line-height: 34rpx;
		padding: 0 12rpx;
		border-radius: 6rpx;
		border: 2rpx solid #28CD50;
	}

	.detailsMain-li-right-three {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.detailsMain-li-right-three-box {
		display: flex;
		align-items: center;
	}

	.detailsMain-li-right-three-box-danwei {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.detailsMain-li-right-three-box-input {
		width: 92rpx;
		height: 44rpx;
		border-radius: 8rpx;
		border: 2rpx solid #CCCCCC;
		margin: 0rpx 8rpx;
		text-align: center;
		font-size: 28rpx;
		color: #5DD4D6 !important;
	}

	.detailsMain-li-right-three-box-money {
		font-size: 24rpx;
		color: #333333;
	}

	.detailsMain-li-right-three-box-num {
		font-size: 32rpx;
		color: #333333;
	}

	.detailsMain-li-right-three-box-unit {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	.detailsMain-li-right-four {
		display: flex;
		justify-content: flex-end;
		margin-top: 22rpx;
	}

	.detailsMain-li-right-four-txt1 {
		font-size: 28rpx;
		color: #333333;
	}

	.detailsMain-li-right-four-txt2 {
		font-size: 32rpx;
		color: #EF691C;
	}

	.details-account {
		margin: 0 24rpx;
		/* height: 96rpx; */
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx 28rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.details-account-left-txt {
		margin-left: 30rpx;
	}

	.details-account-img {
		width: 32rpx;
		height: 32rpx;
		float: right;
	}

	.details-logistics {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 16px;
	}

	.details-logistics-box {
		padding: 28rpx 0;
		margin: 0 24rpx;
		display: flex;
		align-items: center;
	}

	.details-logistics-box-txt {
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
	}

	.details-logistics-box-input {
		flex: 1;
		margin-left: 30rpx;
		font-size: 28rpx;
		color: #999999;
		font-weight: 400;
	}

	.details-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 40rpx;
		width: 100%;
		z-index: 666;
	}

	.details-btn-box {
		width: 686rpx;
		padding: 0 16rpx;
		height: 120rpx;
		background: #313131;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
	}

	.details-btn-img {
		width: 74rpx;
		height: 94rpx;
	}

	.details-btn-title {
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: 400;
		margin-left: 16rpx;
	}

	.details-btn-txt {
		font-size: 36rpx;
		color: #FF9300;
		flex: 1;
		margin-right: 16rpx;
	}

	.details-btn-box {
		display: flex;
		align-items: center;
	}

	.details-btn-box-txt {
		display: block;
		padding: 18rpx 32rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background: #5DD4D6;
		border-radius: 35rpx;
	}

	/* 弹窗样式 */
	.YJWupSuccess {
		width: 416rpx;
		height: 392rpx;
		background: linear-gradient(180deg, #F3E2D4 0%, #FAF4F0 100%);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
		padding-top: 0.1rpx;
	}

	.YJWupSuccessImg {
		width: 216rpx;
		height: 156rpx;
		margin-top: 32rpx;
	}

	.YJWupSuccessTitle {

		color: #333333;
		line-height: 44rpx;
		font-size: 32rpx;
	}

	.YJWupSuccessContent {
		line-height: 40rpx;
		color: #C1814E;
		font-weight: 400;
		font-size: 28rpx;
		margin-top: 24rpx;
	}

	.YJWupSuccessBtn {
		width: 272rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #C1814E;
		border-radius: 40rpx;
		text-align: center;
		margin-top: 35rpx;
		color: #F8EEE6;
		font-size: 28rpx;
	}
</style>
